<template>
  <div class="app-container home">
    <div class="data-screen-container">
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="data-title">
            <h2>系统数据概览</h2>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="data-row">
        <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item, index) in statisticsData" :key="index">
          <el-card shadow="hover" class="data-card">
            <div class="card-header">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </div>
            <div class="card-body">
              <count-to :start-val="0" :end-val="item.value" :duration="2000" class="card-num" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="chart-row">
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>系统访问趋势</span>
            </div>
            <div class="chart-container">
              <echart-wrapper :options="lineChartOptions" height="300px" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>用户来源分布</span>
            </div>
            <div class="chart-container">
              <echart-wrapper :options="pieChartOptions" height="300px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-row :gutter="20" class="chart-row">
        <el-col :span="24">
          <el-card shadow="hover" class="chart-card">
            <div slot="header" class="chart-header">
              <span>系统资源使用情况</span>
            </div>
            <div class="chart-container">
              <echart-wrapper :options="barChartOptions" height="300px" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import EchartWrapper from '@/components/DataScreen/EchartWrapper';
import CountTo from 'vue-count-to';

export default {
  name: "Index",
  components: {
    EchartWrapper,
    CountTo
  },
  data() {
    return {
      statisticsData: [
        { title: '活跃用户', value: 12580, icon: 'el-icon-user' },
        { title: '系统消息', value: 1853, icon: 'el-icon-message' },
        { title: '操作日志', value: 8962, icon: 'el-icon-document' },
        { title: '在线用户', value: 253, icon: 'el-icon-s-custom' }
      ],
      lineChartOptions: {
        title: {
          text: '近七日访问量',
          left: 'center',
          textStyle: {
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '访问量',
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            itemStyle: {
              color: '#409EFF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(64, 158, 255, 0.8)' },
                  { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
                ]
              }
            }
          }
        ]
      },
      pieChartOptions: {
        title: {
          text: '用户来源',
          left: 'center',
          textStyle: {
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['PC端', '移动端', '微信小程序', 'APP', '其他']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'PC端' },
              { value: 735, name: '移动端' },
              { value: 580, name: '微信小程序' },
              { value: 484, name: 'APP' },
              { value: 300, name: '其他' }
            ]
          }
        ]
      },
      barChartOptions: {
        title: {
          text: '系统资源监控',
          left: 'center',
          textStyle: {
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['CPU', '内存', '磁盘', '网络'],
          top: 30
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '使用率',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value}%'
            }
          }
        ],
        series: [
          {
            name: 'CPU',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [35, 45, 60, 70, 65, 55, 40]
          },
          {
            name: '内存',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [45, 50, 65, 75, 70, 60, 50]
          },
          {
            name: '磁盘',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [25, 30, 40, 45, 50, 55, 60]
          },
          {
            name: '网络',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [20, 30, 50, 60, 55, 45, 35]
          }
        ]
      }
    };
  },
  methods: {
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  
  .data-screen-container {
    .data-title {
      text-align: center;
      margin-bottom: 20px;
      h2 {
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .data-row {
      margin-bottom: 20px;
      
      .data-card {
        height: 120px;
        .card-header {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          
          i {
            font-size: 24px;
            margin-right: 10px;
            color: #409EFF;
          }
          
          span {
            font-size: 16px;
            color: #606266;
          }
        }
        
        .card-body {
          .card-num {
            font-size: 28px;
            font-weight: bold;
            color: #303133;
          }
        }
      }
    }
    
    .chart-row {
      margin-bottom: 20px;
      
      .chart-card {
        .chart-header {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
        }
        
        .chart-container {
          height: 300px;
        }
      }
    }
  }
}
</style>

